<script lang="ts">
	import Switch from '$lib/components/Form/Switch/Switch.svelte';
	import ComponentPreview from '$lib/components/Others/ComponentBrowser/ComponentPreview.svelte';
	import Table from '$lib/components/Data/Table/Table.svelte';
	import TableColumn from '$lib/components/Data/Table/TableColumn.svelte';

	const code1 = `<script lang="ts">
	import Switch from '$lib/components/Form/Switch/Switch.svelte';
	let basicValue = false;
	let customColorValue = false;
	let textValue = false;
	let iconInnerValue = false;
	let iconOuterValue = false;
<\/script>
<div class="example">
	<div class="example-group">
		<span class="label">基础开关</span>
		<Switch bind:value={basicValue} />
	</div>
	<div class="example-group">
		<span class="label">自定义颜色</span>
		<Switch bind:value={customColorValue} activeColor="#4cd964" inactiveColor="#ff3b30" />
	</div>
	<div class="example-group">
		<span class="label">左右文字描述</span>
		<Switch bind:value={textValue} activeText="开" inactiveText="关" />
	</div>
	<div class="example-group">
		<span class="label">图标在滑块内</span>
		<Switch bind:value={iconInnerValue} activeIcon="form/checked" inactiveIcon="symbol/close" inlinePrompt={true}  />
	</div>
	<div class="example-group">
		<span class="label">图标在滑块外</span>
		<Switch bind:value={iconOuterValue} activeIcon="form/checked" inactiveIcon="symbol/close" inlinePrompt={false}  />
	</div>
</div>`.trim();

	const code2 = `<script lang="ts">
	import Switch from '$lib/components/Form/Switch/Switch.svelte';
	let largeValue = false;
	let defaultValue = false;
	let smallValue = false;
<\/script>
<div class="example">
	<div class="example-group">
		<span class="label">大尺寸</span>
		<Switch bind:value={largeValue} size="lg" />
	</div>
	<div class="example-group">
		<span class="label">默认尺寸</span>
		<Switch bind:value={defaultValue} size="md" />
	</div>
	<div class="example-group">
		<span class="label">小尺寸</span>
		<Switch bind:value={smallValue} size="sm" />
	</div>
</div>`.trim();

	const code3 = `<script lang="ts">
	import Switch from '$lib/components/Form/Switch/Switch.svelte';
	let disabledActiveValue = true;
	let disabledInactiveValue = false;
<\/script>
<div class="example">
	<div class="category">
		<span class="keyword">禁用状态</span>
	</div>
	<div class="example-group">
		<span class="label">开启禁用</span>
		<Switch bind:value={disabledActiveValue} disabled={true} />
	</div>
	<div class="example-group">
		<span class="label">关闭禁用</span>
		<Switch bind:value={disabledInactiveValue} disabled={false}/>
	</div>
</div>`.trim();

	// 新增：activeValue/inactiveValue 示例代码（对齐 Element Plus 用法）
	const code4 = `<script lang="ts">
	import Switch from '$lib/components/Form/Switch/Switch.svelte';
	// 字符串类型值
	let stringValue = 'Y';
	// 数字类型值
	let numberValue = 1;

	// 自定义激活/关闭值
	const activeStrValue = 'Y';
	const inactiveStrValue = 'N';
	const activeNumValue = 1;
	const inactiveNumValue = 0;
<\/script>
<div class="example">
	<div class="category">
		<span class="keyword">字符串类型值</span>
	</div>
	<div class="example-group" style="align-items: center; gap: 10px; margin-top: 10px;">
		<span class="label">激活为 Y，关闭为 N</span>
		<Switch 
			bind:value={stringValue} 
			activeValue={activeStrValue} 
			inactiveValue={inactiveStrValue} 
			activeText="是" 
			inactiveText="否" 
		/>
	</div>

	<div class="category" style="margin-top: 20px;">
		<span class="keyword">数字类型值</span>
	</div>
	<div class="example-group" style="align-items: center; gap: 10px; margin-top: 10px;">
		<span class="label">激活为 1，关闭为 0</span>
		<Switch 
			bind:value={numberValue} 
			activeValue={activeNumValue} 
			inactiveValue={inactiveNumValue} 
			activeText="开启" 
			inactiveText="关闭" 
		/>
	</div>
</div>`.trim();

	// 属性数据（新增 activeValue/inactiveValue 项）
	const attributesData = [
		{ id: 1, name: 'value', describe: '双向绑定值，控制开关状态（支持 bind:value 同步）', type: 'boolean | string | number', defaulValue: 'true' },
		{ id: 2, name: 'size', describe: '开关尺寸（直接使用原始值，无映射）', type: ['lg', 'md', 'sm'], defaulValue: 'md' },
		{ id: 3, name: 'disabled', describe: '是否禁用开关（仅禁用交互，其他属性自动取组件默认值）', type: 'boolean', defaulValue: 'false' },
		{ id: 4, name: 'activeValue', describe: '开关开启时的绑定值', type: 'boolean | string | number', defaulValue: 'true' },
		{ id: 5, name: 'inactiveValue', describe: '开关关闭时的绑定值', type: 'boolean | string | number', defaulValue: 'false' },
		{ id: 6, name: 'activeColor', describe: '开关开启时的背景色（禁用时取默认值 #1989fa）', type: 'string', defaulValue: '#1989fa' },
		{ id: 7, name: 'inactiveColor', describe: '开关关闭时的背景色（禁用时取默认值 #e5e6eb）', type: 'string', defaulValue: '#e5e6eb' },
		{ id: 8, name: 'activeText', describe: '开关开启时的文字描述（显示在开关右侧，禁用时取默认值空）', type: 'string', defaulValue: '' },
		{ id: 9, name: 'inactiveText', describe: '开关关闭时的文字描述（显示在开关左侧，禁用时取默认值空）', type: 'string', defaulValue: '' },
		{ id: 10, name: 'activeIcon', describe: '开关开启时的图标路径（禁用时取默认值空）', type: 'string', defaulValue: '' },
		{ id: 11, name: 'inactiveIcon', describe: '开关关闭时的图标路径（禁用时取默认值空）', type: 'string', defaulValue: '' },
		{ id: 12, name: 'inlinePrompt', describe: '是否将图标显示在滑块（点）内，false 时显示在文字旁', type: 'boolean', defaulValue: 'true' },
		{ id: 13, name: 'name', describe: '表单提交时的字段名称（原生 input 特性）', type: 'string', defaulValue: '' },
		{ id: 14, name: 'id', describe: '组件唯一标识（关联 label 或表单）', type: 'string', defaulValue: 'el-switch-随机字符串' }
	];

	// 事件数据（更新参数类型为 SwitchValue）
	const eventsData = [
		{ id: 1, name: 'onchange', describe: '开关状态变更时触发（点击操作会触发，禁用时不触发）', type: '(value: boolean | string | number) => void' },
		{ id: 2, name: 'oninput', describe: '双向绑定值更新时触发（与 value 同步，禁用时不触发）', type: '(value: boolean | string | number) => void' },
		{ id: 3, name: 'onclick', describe: '点击开关容器时触发（返回原生 MouseEvent，禁用时不触发）', type: '(e: MouseEvent) => void' }
	];

	// ========== 修复核心：响应式变量用 let + $state 声明 ==========
	// 示例绑定值（let 声明避免 "Cannot bind to constant" 错误）
	let basicValue = $state(false);
	let customColorValue = $state(false);
	let textValue = $state(false);
	let iconInnerValue = $state(false);
	let iconOuterValue = $state(false);
	let largeValue = $state(false);
	let defaultValue = $state(false);
	let smallValue = $state(false);
	let disabledActiveValue = $state(true);
	let disabledInactiveValue = $state(false);
	// activeValue/inactiveValue 示例绑定值
	let stringValue = $state('Y');
	let numberValue = $state(1);
	const activeStrValue = 'Y'; // 非响应式常量，保持 const
	const inactiveStrValue = 'N';
	const activeNumValue = 1;
	const inactiveNumValue = 0;
</script>

<div class="component-container">
	<!-- 组件标题与描述 -->
	<div class="title">
		<div class="name">Switch 开关</div>
		<div class="describe">用于在开/关状态之间进行切换的组件，替代原生复选框，支持自定义样式、左右文字描述、图标位置控制、自定义绑定值等扩展功能；禁用状态仅禁用交互，其他属性自动回退到组件默认值。</div>
	</div>
	<div class="compType">#Switch 开关组件</div>

	<!-- 基础用法示例 -->
	<div class="subtitle">
		<div class="name">基础用法</div>
		<div class="describe">
			通过<span class="keyword">&nbsp;bind:value&nbsp;</span>双向绑定控制状态，支持<span class="tag">自定义颜色</span>、<span class="tag">左右文字描述</span>、<span class="tag">图标位置控制</span>等扩展用法；通过<span class="keyword">&nbsp;inlinePrompt&nbsp;</span>控制图标是否显示在滑块内。
		</div>
	</div>
	<ComponentPreview code={code1}>
		<div class="example">
			<div class="example-group" style="align-items: center; gap: 10px;">
				<span class="label">基础开关</span>
				<Switch bind:value={basicValue} />
			</div>
			<div class="example-group" style="align-items: center; gap: 10px; margin-top: 10px;">
				<span class="label">自定义颜色</span>
				<Switch bind:value={customColorValue} activeColor="#4cd964" inactiveColor="#ff3b30" />
			</div>
			<div class="example-group" style="align-items: center; gap: 10px; margin-top: 10px;">
				<span class="label">左右文字描述</span>
				<Switch bind:value={textValue} activeText="开" inactiveText="关" />
			</div>
			<div class="example-group" style="align-items: center; gap: 10px; margin-top: 10px;">
				<span class="label">图标在滑块内</span>
				<Switch bind:value={iconInnerValue} activeIcon="form/checked" inactiveIcon="symbol/close" inlinePrompt={true} />
			</div>
			<div class="example-group" style="align-items: center; gap: 10px; margin-top: 10px;">
				<span class="label">图标在滑块外</span>
				<Switch bind:value={iconOuterValue} activeIcon="form/checked" inactiveIcon="symbol/close" inlinePrompt={false} />
			</div>
		</div>
	</ComponentPreview>

	<!-- 尺寸控制示例 -->
	<div class="subtitle" style="margin-top: 30px;">
		<div class="name">组件大小</div>
		<div class="describe">
			通过<span class="keyword">&nbsp;size&nbsp;</span>值
			<span class="tag">lg</span>、
			<span class="tag">md</span>、
			<span class="tag">sm</span>&nbsp;&nbsp;直接控制开关尺寸，适配不同布局场景。
		</div>
	</div>
	<ComponentPreview code={code2}>
		<div class="example">
			<div class="example-group" style="align-items: center; gap: 10px;">
				<span class="label">大尺寸</span>
				<Switch bind:value={largeValue} size="lg" />
			</div>
			<div class="example-group" style="align-items: center; gap: 10px; margin-top: 10px;">
				<span class="label">默认尺寸</span>
				<Switch bind:value={defaultValue} size="md" />
			</div>
			<div class="example-group" style="align-items: center; gap: 10px; margin-top: 10px;">
				<span class="label">小尺寸</span>
				<Switch bind:value={smallValue} size="sm" />
			</div>
		</div>
	</ComponentPreview>

	<!-- 禁用状态示例 -->
	<div class="subtitle" style="margin-top: 30px;">
		<div class="name">禁用状态</div>
		<div class="describe">
			通过<span class="keyword">&nbsp;disabled&nbsp;</span>属性仅禁用交互（其他属性取默认值），禁用状态会禁止用户操作。
		</div>
	</div>
	<ComponentPreview code={code3}>
		<div class="example">
			<div class="category">
				<span class="keyword">禁用状态</span>
			</div>
			<div class="example-group" style="align-items: center; gap: 10px; margin-top: 10px;">
				<span class="label">开启禁用</span>
				<Switch bind:value={disabledActiveValue} disabled={true}/>
			</div>
			<div class="example-group" style="align-items: center; gap: 10px; margin-top: 10px;">
				<span class="label">关闭禁用</span>
				<Switch bind:value={disabledInactiveValue} disabled={false}/>
			</div>
		</div>
	</ComponentPreview>

	<!-- 新增：自定义绑定值示例 -->
	<div class="subtitle" style="margin-top: 30px;">
		<div class="name">自定义绑定值</div>
		<div class="describe">
			通过<span class="keyword">&nbsp;activeValue&nbsp;</span>和<span class="keyword">&nbsp;inactiveValue&nbsp;</span>自定义开关的绑定值，支持<span class="tag">字符串</span>、<span class="tag">数字</span>、<span class="tag">布尔值</span>类型，适配不同业务场景。
		</div>
	</div>
	<ComponentPreview code={code4}>
		<div class="example">
			<div class="category">
				<span class="keyword">字符串类型值</span>
			</div>
			<div class="example-group" style="align-items: center; gap: 10px; margin-top: 10px;">
				<Switch 
					bind:value={stringValue} 
					activeValue={activeStrValue} 
					inactiveValue={inactiveStrValue} 
					activeText="是" 
					inactiveText="否" 
				/>
			</div>

			<div class="category" style="margin-top: 20px;">
				<span class="keyword">数字类型值</span>
			</div>
			<div class="example-group" style="align-items: center; gap: 10px; margin-top: 10px;">
				<Switch 
					bind:value={numberValue} 
					activeValue={activeNumValue} 
					inactiveValue={inactiveNumValue} 
					activeText="开启" 
					inactiveText="关闭" 
				/>
			</div>
		</div>
	</ComponentPreview>

	<!-- 属性表 -->
	<div class="subtitle" style="margin-top: 30px;">
		<div class="name">Switch Attributes</div>
	</div>
	<Table data={attributesData} border={false} size="lg">
		<TableColumn key="name" title="属性名" align="left" minWidth={120} />
		<TableColumn key="describe" title="说明" align="left" minWidth={300} />
		<TableColumn key="type" title="类型" align="left" minWidth={200}>
			{#snippet cell(scope)}
				{#if Array.isArray(scope.row.type)}
					<span style="display:inline-flex; gap: 10px; flex-wrap: wrap;">
						{#each scope.row.type as item}
							<span class="tag">{item}</span>
						{/each}
					</span>
				{:else}
					<span>{scope.row.type}</span>
				{/if}
			{/snippet}
		</TableColumn>
		<TableColumn key="defaulValue" title="默认值" align="left" minWidth={150} />
	</Table>

	<!-- 事件表 -->
	<div class="subtitle" style="margin-top: 30px;">
		<div class="name">Switch Events</div>
	</div>
	<Table data={eventsData} border={false} size="lg">
		<TableColumn key="name" title="事件名" align="left" minWidth={120} />
		<TableColumn key="describe" title="说明" align="left" minWidth={300} />
		<TableColumn key="type" title="类型" align="left" minWidth={300}></TableColumn>
	</Table>
</div>

<!-- 文档专属样式 -->
<style scoped>
	.example {
		padding: 20px;
		background: #f5f5f5;
		border-radius: 8px;
	}

	.example-group {
		display: flex;
		align-items: center;
	}

	.category {
		margin-top: 15px;
		font-weight: 600;
		color: #333;
	}

	.label {
		width: 120px;
		color: #666;
	}

	.keyword {
		color: #1989fa;
		background: rgba(25, 137, 250, 0.1);
		padding: 2px 6px;
		border-radius: 4px;
	}

	.tag {
		display: inline-block;
		padding: 2px 8px;
		background: #e8f4ff;
		color: #1989fa;
		border-radius: 4px;
		font-size: 12px;
	}
</style>